﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
 //绘制的几何图形要素
        var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
        var lineFeature = new ol.Feature(
            new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
        var polygonFeature = new ol.Feature(
            new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
                [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));

        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector({
            features: [pointFeature, lineFeature, polygonFeature]
        });
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vector);

        //定义修改几何图形功能控件
        var Modify = {
            init: function () {
                //初始化一个交互选择控件,并添加到地图容器中
                this.select = new ol.interaction.Select();
                map.addInteraction(this.select);
                //初始化一个交互编辑控件，并添加到地图容器中
                this.modify = new ol.interaction.Modify({
                    //选中的要素
                    features: this.select.getFeatures()
                });
                map.addInteraction(this.modify);
                //设置几何图形变更的处理
                this.setEvents();
            },
            setEvents: function () {
                //选中的要素
                var selectedFeatures = this.select.getFeatures();
                //添加选中要素变更事件
                this.select.on('change:active', function () {
                    selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
                });
            },
            setActive: function (active) {
                //激活选择要素控件
                this.select.setActive(active);
                //激活修改要素控件
                this.modify.setActive(active);
            }
        };
        //初始化几何图形修改控件
        Modify.init();
        //激活几何图形修改控件;
        Modify.setActive(true);
        }
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>
